const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  module: {
    // 针对模块进行配置，
    rules: [
      {
        // 每个规则是一个对象
        test: /\.js$/, // 匹配的模块正则
        issuer: /\.js$/, // 只匹配真正的 js 文件，排除其他类型
        use: [
          // 匹配到后应用的模块规则
          {
            // 其中一个规则
            loader: "./loaders/test-loader", // 指定 loader 的路径
            options: {
              // 向对应的 loader 传递的额外参数
            },
          },
        ],
        // enforce: "pre",
      },
      // 模块匹配规则，可以存在多个规则是从下到上依次匹配
      {
        // 一开始尝试添加css 校验的 rule 时，发现 test-loader 的 rule 存在的时候，解析 css 是失败的。
        /**
         * CSS 文件被 JS 规则匹配：很多 CSS 文件（特别是通过 import './style.css' 导入的）会被 Webpack 当作 JS 模块处理
         * JS 规则优先级更高：由于 JS 规则在数组的上方（Webpack 从下到上匹配），当 CSS 文件被误判为 JS 时，就会先被 JS 规则捕获
         * loader 不兼容：test-loader 可能无法正确处理 CSS 内容，导致解析失败
         */
        test: /\.css$/,
        use: [
          {
            loader: "./loaders/css-loader",
          },
        ],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()],
};
